import React, { FC, Fragment, useState } from 'react';

import { Row, Col, Input, Collapse, Form, Switch, Progress, Radio, Slider, Select, Button } from 'antd';
import { SearchOutlined, StarOutlined, PictureOutlined, ClusterOutlined, PoweroffOutlined, SoundOutlined, SettingOutlined, BugOutlined, MessageOutlined } from '@ant-design/icons';

import IconFont from '../components/IconFont';

import './index.less';

const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const Main: FC = () => {
  const [screenForm] = Form.useForm();
  const [sensorForm] = Form.useForm();
  const [batteryForm] = Form.useForm();
  const [soundForm] = Form.useForm();
  const [deviceSettingForm] = Form.useForm();
  const [debugSettingForm] = Form.useForm();
  const [distributedCapabilityForm] = Form.useForm();
  const [fold, setFold] = useState(false);

  const onRequiredTypeChange = () => {

  };

  return (
    <Row>
      <Col span={fold ? 24 : 14} className="Render">
        <div className="Simulator">
          <div className="EventTip">
            <span>Pointer Event: touchRelease</span>
            <span>Pointer Location: 100:100</span>
          </div>
          <div className="SimulatorBox" style={{ width: 530, height: 626 }} >
            <canvas className="Canvas" width="454" height="454"></canvas>
            <div className="SimulatorBG" style={{ width: 530, height: 626 }} />
          </div>
        </div>
        <div className="Operation">
          <div className="FoldBtn" onClick={() => setFold(!fold)}><IconFont type="icon-menu" style={{ fontSize: 20 }} /></div>
        </div>
      </Col>
      <Col span={fold ? 0 : 10} className="Setting">
        <div className="TitleAndSearch">
          <div className="Title">
            Huawei Lite Wearable 454*454
          </div>
          <div className="Search">
            <Input
              placeholder="Search"
              suffix={
                <SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
              }
            />
          </div>
        </div>
        <div className="SettingItem">
          <Collapse bordered={false}>
            <Panel header={<Fragment><StarOutlined /> Favorites</Fragment>} key="Favorites">
            </Panel>
            <Panel header={<Fragment><PictureOutlined /> Screen</Fragment>} key="Screen">
              <Form
                form={screenForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Turn screen on" valuePropName="checked" name="ScreenStatus" initialValue={"checked"}>
                  <Switch />
                </Form.Item>
                <Form.Item label="Keep screen on">
                  <Form.Item className="column" name="ScreenMode" valuePropName="checked" initialValue={"checked"}>
                    <Switch />
                  </Form.Item>
                  <Form.Item name="ScreenDelay">
                    <Progress percent={0} />
                  </Form.Item>
                </Form.Item>
                <Form.Item label="Brightness adjustment mode" name="BrightnessMode" initialValue={"Manual"}>
                  <Radio.Group>
                    <Radio value="Manual">Manual</Radio>
                    <Radio value="Automatic">Automatic</Radio>
                  </Radio.Group>
                </Form.Item>
                <Form.Item label="Brightness">
                  <Form.Item
                    initialValue={30}
                    name="BrightnessSlider"
                    style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                  >
                    <Slider min={1} max={255} />
                  </Form.Item>
                  <Form.Item
                    initialValue={30}
                    name="BrightnessNum"
                    style={{ display: 'inline-block', width: 'calc(20% - 8px)', margin: '0 8px' }}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><ClusterOutlined /> Sensor</Fragment>} key="Sensor">
              <Form
                form={sensorForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="On-body status" valuePropName="checked" name="OnbodyStatus" initialValue={"checked"}>
                  <Switch />
                </Form.Item>
                <Form.Item label="Barometer(Pa)" initialValue={30} name="Barometer">
                  <Input />
                </Form.Item>
                <Form.Item label="Heart rate">
                  <Form.Item
                    initialValue={30}
                    name="HeartRateSlider"
                    style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                  >
                    <Slider min={0} max={255} />
                  </Form.Item>
                  <Form.Item
                    initialValue={30}
                    name="HeartRateNum"
                    style={{ display: 'inline-block', width: 'calc(20% - 8px)', margin: '0 8px' }}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item label="Step count">
                  <Form.Item
                    initialValue={30}
                    name="StepCountSlider"
                    style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                  >
                    <Slider min={0} max={255} />
                  </Form.Item>
                  <Form.Item
                    initialValue={30}
                    name="StepCountNum"
                    style={{ display: 'inline-block', width: 'calc(20% - 8px)', margin: '0 8px' }}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
                <Form.Item label="Geographic location">
                  <Form.Item
                    label="Longitude"
                    initialValue={30}
                    name="Longitude"
                    className="row"
                    style={{ display: 'inline-block', width: 'calc(50% - 80px)', margin: '0 40px' }}
                  >
                    <Input bordered={false} />
                  </Form.Item>
                  <Form.Item
                    label="Latitude"
                    initialValue={30}
                    name="Latitude"
                    className="row"
                    style={{ display: 'inline-block', width: 'calc(50% - 80px)', margin: '0 40px' }}
                  >
                    <Input bordered={false} />
                  </Form.Item>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><PoweroffOutlined /> Battery</Fragment>} key="Battery">
              <Form
                form={batteryForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Charging status" name="Chargingstatus" initialValue={"NotCharging"}>
                  <Radio.Group>
                    <Radio value="NotCharging">Not charging</Radio>
                    <Radio value="Charging">Charging</Radio>
                    <Radio value="WirelessCharging">Wireless Charging</Radio>
                  </Radio.Group>
                </Form.Item>
                <Form.Item label="Battery level">
                  <Form.Item
                    initialValue={30}
                    name="BatterySlider"
                    style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                  >
                    <Slider min={0} max={100} />
                  </Form.Item>
                  <Form.Item
                    initialValue={30}
                    name="BatteryNum"
                    style={{ display: 'inline-block', width: 'calc(20% - 8px)', margin: '0 8px' }}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><SoundOutlined /> Sound</Fragment>} key="Sound">
              <Form
                form={soundForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Volume">
                  <Form.Item
                    initialValue={30}
                    name="VolumeSlider"
                    style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                  >
                    <Slider min={0} max={100} />
                  </Form.Item>
                  <Form.Item
                    initialValue={30}
                    name="VolumeNum"
                    style={{ display: 'inline-block', width: 'calc(20% - 8px)', margin: '0 8px' }}
                  >
                    <Input />
                  </Form.Item>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><SettingOutlined /> Device Settings</Fragment>} key="DeviceSetting">
              <Form
                form={deviceSettingForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Language" name="Language" initialValue={"en-US"}>
                  <Select>
                    <Select.Option value="zh-CN">zh-CN</Select.Option>
                    <Select.Option value="en-US">en-US</Select.Option>
                  </Select>
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><BugOutlined /> Debugging</Fragment>} key="Debugging">
              <Form
                form={debugSettingForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Screen coordinate system" valuePropName="checked" name="ScreenCoordinateSystem">
                  <Switch />
                </Form.Item>
              </Form>
            </Panel>
            <Panel header={<Fragment><MessageOutlined /> Distributed Capability</Fragment>} key="DistributedCapability">
              <Form
                form={distributedCapabilityForm}
                layout="vertical"
                onValuesChange={onRequiredTypeChange}
              >
                <Form.Item label="Distributed communications">
                  <Form.Item className="column" label="Device ID" name="DeviceID">
                    <Input bordered={false} placeholder="Device ID" />
                  </Form.Item>
                  <Form.Item className="column" label="Bundle name" name="BundleName">
                    <Input bordered={false} placeholder="Bundle name" />
                  </Form.Item>
                  <Form.Item className="column" label="Ability name" name="AbilityName">
                    <Input bordered={false} placeholder="Ability name" />
                  </Form.Item>
                  <Form.Item className="column" label="Message" name="Message">
                    <Input.TextArea placeholder="Message" />
                  </Form.Item>
                </Form.Item>
                <Form.Item className="submit">
                  <Button type="primary" style={{ width: 100 }}>
                    Send
                  </Button>
                </Form.Item>
              </Form>
            </Panel>
          </Collapse>
        </div>
      </Col>
    </Row>
  )
};

export default Main;
